import React, { ReactNode } from 'react'
import { TouchableWithoutFeedback, Text } from 'react-native'
import dayjs from 'dayjs'
import { Calendar, Modal } from '../../components'

interface Props{
  value?: Date | string | number | null;
  placeholder?: string;
  onChange?: (data: Date | string | number) => void;
}

export default class DatePicker extends React.Component<Props, {}> {
  public onShowPicker (): void {
    Modal.open((props: any): ReactNode => {
      return <Calendar onChange={props._close} value={this.props.value} />
    }, null, { popup: true }
    ).afterClose((data: Date | string | number): void => {
      this.props.onChange && this.props.onChange(data)
    })
  }

  public render (): JSX.Element {
    const { value, placeholder } = this.props
    return (
      <TouchableWithoutFeedback onPress={(): void => { this.onShowPicker() }}>
        <Text>
          {
            value ? dayjs(value).format('YYYY-MM-DD') : placeholder
          }
        </Text>
      </TouchableWithoutFeedback>
    )
  }
}
